import React, { createRef, useRef, useState,useEffect, useLayoutEffect } from 'react';
function Animation(){
  let refObj = useRef();
  //useLayoutEffect会在浏览器绘制页面之前执行，直接改变了位置 ，等到绘制页面的时候直接渲染500px就可以了
  //useEffect先绘制页面，绘制页面的时候translate(0px),而且也设置了渐变动画，
  //此时浏览器会在原位置绘制好圆形
  //然后再会执行useEffect指定的副作用函数，修改为translate(500px)
  useEffect(()=>{
    refObj.current.style.transform = `translate(500px)`;
    refObj.current.style.transition = `all 500ms`;
  },[]);
  let styleObj = {
    width:'100px',
    height:'100px',
    borderRadius:'50%',
    backgroundColor:'green'
  }
  return (
    <div style={styleObj} ref={refObj}>

    </div>
  )
}
export default Animation;
